<template>
  <el-table :data="tableData" border stripe height="455">
    <el-table-column prop="content" label="评论内容" width="150"/>
    <el-table-column prop="nickname" label="评论人" width="100" />
    <el-table-column prop="replyName" label="回复对象" width="180"/>
    <el-table-column prop="replyType" label="回复类型" width="90">
      <template #default="scope">
        <el-tag v-if="scope.row.replyType === 0" type="warning" effect="dark">文章</el-tag>
        <el-tag v-else type="primary" effect="dark">用户</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间" width="180"/>
  </el-table>
  <el-pagination
      v-model:current-page="pageNum"
      v-model:page-size="pageSize"
      :page-sizes="[5, 10, 15,20]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="margin-top: 20px"
  />
</template>

<script setup>
import {ref} from 'vue'
import {Search,Delete} from '@element-plus/icons-vue'
import request from "../utils/request";
import {ElMessage} from "element-plus";

const pageNum = ref(1)
const pageSize = ref(10)
const pageTotal = ref(0)
const tableData = ref([])



//改变页码
const handleSizeChange = (val) => {
  pageSize.value = val
  queryPageArticleCommentList()
}
//改变当前页
const handleCurrentChange = (val) => {
  pageNum.value = val
  queryPageArticleCommentList()
}

//查询文章评论列表
const queryPageArticleCommentList = () => {
  request.get('/comments/articles/manage/page',{
    params:{
      pageNum:pageNum.value,
      pageSize:pageSize.value
    }
  }).then(res => {
    if (res.code === 1){
      tableData.value = res.data.records
      pageNum.value = res.data.current
      pageSize.value = res.data.size
      pageTotal.value = res.data.total
    }
  })
}
queryPageArticleCommentList()

</script>

<style scoped>

</style>
